<template>
    <div>
        <h3>门店添加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><span style="color: red;">*</span>店名</td>
                    <td>
                        <input type="text" v-model="query.houseName">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>营业时间</td>
                    <td>
                        <input type="date" v-model="query.beginTime">- <input type="date" v-model="query.endTime">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>服务范围</td>
                    <td>
                        <select v-model="query.serverId">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in xiala.list">{{ item.serverName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>店主</td>
                    <td>
                        <input type="text" v-model="query.dianZhu" >
                    </td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td>
                        <input type="text" v-model="query.phone" maxlength="11">
                    </td>
                </tr>
                <tr>
                    <td>门店介绍</td>
                    <td>
                       <textarea cols="50" rows="5" v-model="query.desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>门店地址</td>
                    <td>
                        <input type="text" v-model="query.addr">
                    </td>
                </tr>
                <tr>
                    <td><span style="color: red;">*</span>状态</td>
                    <td>
                        <input type="radio" name="state" value="1" v-model="query.state">启用
                        <input type="radio" name="state" value="0" v-model="query.state">禁用
                    </td>
                </tr>
                <tr>
                    <td>门店logo</td>
                    <td>
                        <input type="file" @change="imglogo">
                        <img :src="query.imgLogo" alt="" width="100" height="100" v-if="query.imgLogo!=''">
                    </td>
                </tr>
                <tr>
                    <td>门店图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="query.img" alt="" width="100" height="100" v-if="query.img!=''">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-info" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const Route=useRoute();
const Router=useRouter();

onMounted(()=>{
    showServer()
})
//上传门店图片1
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        method:'post',
        url:'/api/Img/UpFile',
        data:f,

    })
    .then(res=>{
        console.log(res);
        query.img=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//上传门店logo
const imglogo=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        method:'post',
        url:'/api/Img/UpFile',
        data:f,

    })
    .then(res=>{
        console.log(res);
        query.imgLogo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//下拉框
const xiala:any=reactive({
    list:[]
})
const showServer=()=>{
    axios({
        method:'get',
        url:'/api/House/ShowServer'
    })
    .then(res=>{
        console.log(res);
        xiala.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
//添加
const query=reactive({
  "serverId": '',
  "houseName": "",
  "beginTime": "",
  "endTime": "",
  "dianZhu": "",
  "phone": "",
  "desc": "",
  "addr": "",
  "state": '',
  "imgLogo": "",
  "img": "",
})
const ok=()=>{
    if(query.houseName==""){
        alert("店名不能为空");
        return;
    }
    if(query.beginTime==""){
        alert("营业时间不能为空");
        return;
    }
    if(query.endTime==""){
        alert("营业时间不能为空");
        return;
    }
    if(query.serverId==""){
        alert("服务范围不能为空");
        return;
    }
    if(query.addr==""){
        alert("门店地址不能为空");
        return;
    }
    if(query.state==""){
        alert("门店状态不能为空");
        return;
    }
    axios({
        method:'post',
        url:'/api/House/HouseAdd',
        data:query,
    })
    .then(res=>{
        console.log(res);
       if(res.data>0){
        alert("添加成功");
        Router.push('/houseShow')
        return;
       }
       else{
        alert("添加失败");
       }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>